<template>
    <view>
        <view class="rx-center">
            <RxListField v-if="row.state.value" class="rx-minorDisplay" :item="item"
                         :col="row.state.col"></RxListField>
            <view class="rx-le" v-if="row.img">
                <image :src="imageUrl(row.img)"/>
            </view>
            <view class="re-ri">
                <view v-if="row.mainDisplay.col" class="rx-mainDisplay">
                    {{ row.mainDisplay.name }}：
                    <RxListField :item="item" :col="row.mainDisplay.col"></RxListField>
                </view>
                <view class="rx-copyDisplay">
                    <template v-for="(label,index) in row.labelDisplay">
                        <view class="rx-copyDisplay-labelDisplay" v-if="item[label.col.field]">
                            <RxListField
                                :item="item"
                                :index="index"
                                :col="label.col">
                            </RxListField>
                        </view>
                    </template>
                </view>
                <view>
                    <!--副显示值-->
                    <view class="rx-copyDisplay-name" v-for="(obj,index) in row.copyDisplayList" :key="index">
                        <view>{{ obj.name }}：</view>
                        <RxListField
                            style="flex: 1"
                            :item="item"
                            :index="index"
                            :col="obj.col">
                        </RxListField>
                    </view>
                </view>
            </view>
        </view>
        <view class="rx-button">
            <view v-for="(button,index) in filterButton.slice(0, 3)" class="rx-button-list"  @click="handMethod(button)">{{ button.i18nJson?$i18(button.i18nJson):button.btnLabel }}</view>
            <view class="rx-button-list" v-if="filterButton.length>3" @click="moreClick(item)">{{ $ti18('rxList.moreBtn', '更多') }}</view>
        </view>
    </view>
    <uni-popup ref="popup" type="bottom">
        <view class="uni-button"  v-for="(button,index) in filterButton.slice(3)" :key="index"  @click="handMethod(button)">{{ button.i18nJson?$i18(button.i18nJson):button.btnLabel }} </view>
    </uni-popup>
</template>

<script>
import RxListField from "./common/RxListField";
import TokenUtil from "@/common/TokenUtil";
export default {
    name: "FormBoListStylize2",
    components: {
        RxListField
    },
    props: {
        columns: {
            type: Array,
            default() {
                return []
            }
        },
        item: {
            type: Object,
            default() {
                return {}
            }
        },
        index: {
            type: Number,
            default: 0
        },
        buttonList: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            row: {
                img: '', //图片
                mainDisplay: {}, //主显示
                labelDisplay: [], //标签显示
                state: {}, //状态
                copyDisplayList: [] //含标题的副显示
            },
            user:uni.getStorageSync("user"),
            filterButton:[],
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            for (var i = 0; i < this.columns.length; i++) {
                let col = this.columns[i];
                if (col.isShow == 'mainShow') {
                    this.row.mainDisplay = {name: this.$i18(col["i18nJson"] || col.header), col: col};
                } else if (col.isShow == 'status') {
                    this.row.state = {value: this.item[col.field], col: col};
                } else if (col.isShow == 'subShowValue') {
                    this.row.copyDisplayList.push({name: this.$i18(col["i18nJson"] || col.header), value: this.item[col.field], col: col});
                } else if (col.isShow == 'label') {
                    this.row.labelDisplay.push({col: col});
                } else if (col.isShow == 'image') {
                    this.row.img = this.item[col.field];
                }
            }
            this.filterButton = []
            //过滤按钮是否显示
            this.buttonList.filter(res=>{
                if(this.btnShow(this.item,res)){
                    this.filterButton.push(res)
                }
            })
        },
        imageUrl(file) {
            if (!file) {
                return;
            }
            let token = TokenUtil.getToken();
            let imgList = JSON.parse(file)
            return this.realUrl() +"/api-system/system/core/sysFile/previewFile?fileId=" + imgList[0].fileId + "&accessToken=" + token;
        },
        next(item) {
            this.$emit("next", item);
        },
        moreClick(item) {
            this.$refs.popup.open()
        },
        handMethod(btn) {
            //在FormBoListPreviewList.vue页面使用
            this.$eventBus.$emit('handMethod', btn, this.item);
            this.$refs.popup.close()
        },
        btnShow(row,btn){
            if(!btn.isSetedShowCondition){
                return true
            }
            let isShow = this.checkRightByDialogButton(btn, row)
            return  isShow
        },
        /**
         * 根据条件判断按钮是否显示
         * @param {Object} btn 按钮对象
         * @param {Object} row 一行数据对象
         */
        checkRightByDialogButton(btn, row) {
            if (!btn.btnShow) {
                return true;
            }
            let fn = new Function("row", "user", "btn", btn.btnShow);
            let rtn = fn(row, this.user, btn);
            return rtn;
        },
    },
    watch:{
        item:{
            handler(){
                this.row = {
                    img: '', //图片
                    mainDisplay: {}, //主显示
                    labelDisplay: [], //标签显示
                    state: {}, //状态
                    copyDisplayList: [] //含标题的副显示
                }
                this.init();
            }
        }
    }
}
</script>

<style scoped>
.rx-center {
    display: flex;
    padding: 0.5rem;
    overflow: hidden;
    position: relative;
}
.rx-minorDisplay{
    position: absolute;
    right: 0rem;
    top: 0rem;
    text-overflow: ellipsis;
    color: white;
    background: #87d068;
    padding: 0.25rem;
    border-radius: 0 2px 0 12px;
}
.re-ri {
    flex: 1;
    overflow: hidden;
}

.rx-le {
    width: 4rem;
    height: 4rem;
    overflow: hidden;
    border-radius: 5px;
    margin-right: .5rem;
}

.rx-le image {
    width: 100%;
    height: 100%;
}

.rx-mainDisplay {
    font-weight: bold;
    font-size: 1rem;
    display: flex;
}

.rx-mainDisplay > div {
    font-weight: bold;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rx-copyDisplay-name{
    color: #777777;
    margin-right: 0.5rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: baseline;
}
.rx-copyDisplay-labelDisplay{
    background-color: #f6f6f4;
    border-radius: 3px;
    color: #646464;
    margin-right: 0.5rem;
    margin-top: 0.25rem;
    padding: 0.2rem;
}
.rx-button{
    display: flex;
    border-top: 1px solid #e8e8e8;
    margin-top: .5rem;
}
.rx-button-list{
    font-size: 1rem;
    line-height: 2.5rem;
    height: 2.5rem;
    text-align: center;
    border-right: 1px solid #e8e8e8;
    color: #bcbebf;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.rx-button-list:last-child {
    border-right: none;
    color: rgb(66, 133, 242);
}
.uni-button{
    height: 2.5rem;
    background: white;
    text-align: center;
    width: 100%;
    line-height: 2.5rem;
    border-top: 1px solid #e8e8e8;
    font-size: 0.9rem;
}
.rx-copyDisplay{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}
</style>
